<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>微信</title>
	<style>
		*{padding:0;margin:0;}
		ul{
			list-style:none;
			position:absolute;
			left:60px;
			top:30px;
		}
		li{
			width:30px;
			height:40px;
			border:1px solid gray;
			float:left;
		}
		#did{
			position:absolute;
			right:200px;
			top:100px;
			width:200px;
			height:200px;
			background-color:#fff;
			cursor:pointer;
		}
		#dd{
			position:absolute;
			left:-100px;
			top:40px;
			width:100px;
			height:100px;
			background-color:black;
			display:none;
		}
	</style>
</head>
<body>
	<ul id="bgcolor" >
		<li ></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>

	<div id="did" >
		<div id="dd" ></div>
	</div>

</body>
	<script>
		list = document.getElementsByTagName("li");
		list[0].style.backgroundColor="#ff6700";
		list[1].style.backgroundColor="#ccc";
		list[2].style.backgroundColor="pink";
		list[3].style.backgroundColor="green";
		document.body.style.background="red";

		for(var i=0;i<list.length;i++){
			list[i].onclick=function(){
				bgcolor = this.style.backgroundColor;
				document.body.style.background=bgcolor;
			}
		}

		did = document.getElementById("did");
		dd = document.getElementById("dd");

		did.onmouseover=function(){
			dd.style.display="block";
		}

		did.onmousedown=function(e){
			ee = e||window.event;
			var x = ee.pageX-did.offsetLeft;
			var y = ee.pageY-did.offsetTop;
			document.onmousemove=function(e){
				ee = e||window.event;

				x1 = ee.pageX;
				y1 = ee.pageY;
				did.style.left = x1-x+"px";
				did.style.top = y1-y+"px";
			}
			did.onmouseup=function(){
				document.onmousemove=null;
			}
		}

		did.onmouseout=function(){
			dd.style.display="none";
		}
		mask=true;
		setInterval(function(){
			if(mask){
				document.title = "【新消息+1】";
				mask = false;
			}else{
				document.title = "微信";
				mask=true;
			}
		},600);

	</script>
</html>